<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>
    <script src="../js/jquery.cookie-1.4.1.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #b3d6ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        #resText, #resText2, #resText3{
            border:#666 1px solid;
            padding: 10px;
        }
        form{
            border: #f300ff inset 3px;
            padding: 10px;
            background: #d3e5ff;
        }

        textarea{
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>Ajax练习</h1>
    <hr>
    <br>
    <h3>Ajax的POST方法</h3>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3">
            <form action="#" id="form1">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input class="form-control" id="username" name="username" >
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input class="form-control" id="password" name="password" type="password" value="">
                </div>
                <div class="form-group">
                    <label><input id="remember" type="checkbox"> 记住用户名</label>
                </div>
                <input class="btn btn-success" id="send" type="submit" value="提交">
            </form>
            <br><br>
            <div hidden>
                <div class="well-sm"><b>以下是提交结果:</b></div>
                <div id="resText1"></div>
            </div>
            <hr>
        </div>
    </div>
    <div style="height: 500px"></div>
</div>
<script>
    $(function(){
        var COOKIE_NAME = "username";
//      下面这一行本来为if($.cookie(COOKIE_NAME)),但经实践发现，如果这个变量不存在则返回字符串"null",则if便判断为真，就执行下一行，输入框内就会出现null
//        这时应该写成if($.cookie(COOKIE_NAME)!= "null")才能解决问题！
        if($.cookie(COOKIE_NAME) != "null"){
            $ ("#username").val($.cookie(COOKIE_NAME),{path:"/"})
        }
        if(null)
            alert("I'm null!!!");
        $("#remember").click(function(){
            if (this.checked){
                $.cookie(COOKIE_NAME,
                        $("#username").val(),
                        {path:"/",expires:7})
            }else{
                $.cookie(COOKIE_NAME, null, {path:"/"})
            }
        })
    })

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>